<template>
	<view class="index">
        <music-head title="网易云音乐" color="blue"></music-head>
        <view class="container">
            <scroll-view scroll-y="true">
                <!-- search-section -->
                <view class="index-search" @tap="handleToSearch">
                    <text class="iconfont iconsearch"></text>
                    <input type="text" value="" placeholder="搜索歌曲" />
                </view>
                <!-- search-section -->
                
                <!-- 骨架屏 -->
                    <view
                        class="skeleton"
                        v-if="isLoading"
                    >
                        <m-for-skeleton
                            :avatarSize="200"
                            :row="3"
                            :loading="isLoading"
                            isarc="square"
                            :title="false"
                            :titleStyle="{}"
                            v-for="(item,key) in 4"
                            :key="key"
                        >
                        </m-for-skeleton>
                    </view>
                <!-- 骨架屏 -->
                
                <!-- list-section -->
                <view class="index-list" v-else>
                    <!-- <view class="index-list-item">
                        <view class="item-img">
                            <image src="https://via.placeholder.com/150" mode=""></image>
                            <text>每天更新</text>
                        </view>
                        <view class="item-list">
                            <view>1. 与我无关 - 阿瑞</view>
                            <view>2. 与我无关 - 阿瑞</view>
                            <view>3. 与我无关 - 阿瑞</view>
                        </view>
                    </view> -->
                    <view
                        class="index-list-item"
                        v-for="item in topList"
                        :key="item.id"
                        @tap="handleToList(item)"
                    >
                        <view class="item-img">
                            <image :src="item.coverImgUrl"></image>
                            <text>{{item.updateFrequency}}</text>
                        </view>
                        <view class="item-list">
                            <view
                                v-for="(song, index) in item.tracks"
                                :key="index"
                                >{{index + 1}}. {{song.first}} - {{song.second}}</view>
                        </view>
                    </view>
                </view>
                <!-- list-section -->
                
            </scroll-view>
        </view>
	</view>
</template>

<script>
    import musicHead from '../../components/music-head/music-head.vue';
    import mForSkeleton from "@/components/m-for-skeleton/m-for-skeleton";
    import { topList } from '../../common/api.js'
	export default {
        components: {
            musicHead,
            mForSkeleton
        },
		data() {
			return {
                topList: [],
                isLoading: true,
			}
		},
		onLoad() {
            topList().then(res => {
                console.log('res: ', res);
                if (res.length) {
                    this.topList = res;
                    this.isLoading = false
                }
            });
		},
		methods: {
            handleToList(item) {
                uni.navigateTo({
                    url: '/pages/list/list?id=' + item.id
                });
            },
            handleToSearch() {
                uni.navigateTo({
                    url: '/pages/search/search',
                    success: res => {},
                    fail: () => {},
                    complete: () => {}
                });
            }
		}
	}
</script>

<style scoped lang="scss">
    .index {
        &-search {
            position: relative;
            height: 70rpx;
            line-height: 70rpx;
            margin: 70rpx 30rpx 30rpx 30rpx;
            border-radius: 80rpx;
            background-color: rgba($color: #f7f7f7, $alpha: 1.0);
            
            text {
                position: absolute;
                left: 20rpx;
                font-size: 36rpx;
            }
            
            input {
                padding: 0 20rpx 0 70rpx;
                height: 70rpx;
                line-height: 70rpx;
                font-size: 28rpx;
            }
        }
        
        &-list {
            margin: 0 30rpx;
            width: calc(100vw - 60rpx);
            
            &-item {
                display: flex;
                margin-bottom: 34rpx;
                width: 100%;
                
                .item-img {
                    position: relative;
                    width: 212rpx;
                    height: 212rpx;
                    border-radius: 30rpx;
                    overflow: hidden;
                    margin-right: 22rpx;
                    flex: 0 0 212rpx;
                    
                    image {
                        width: 100%;
                        height: 100%;
                    }
                    
                    text {
                        position: absolute;
                        left: 12rpx;
                        bottom: 16rpx;
                        color: #fff;
                    }
                }
                
                .item-list {
                    font-size: 24rpx;
                    line-height: 66rpx;
                    overflow: hidden;
                    
                    view {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
</style>
